<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 配置上下文路径   -->
    <base th:href="@{/}">
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <link rel="stylesheet" href="static/css/minireset.css"/>
    <link rel="stylesheet" href="static/css/common.css"/>
    <link rel="stylesheet" href="static/css/cart.css"/>
</head>
<body>
<div class="header">
    <div class="w">
        <div class="header-left">
            <a href="index.html">
                <img src="static/img/logo.gif" alt=""
                /></a>
            <h1>我的购物车</h1>
        </div>
        <div class="header-right" th:include="segment/header::loginRight"></div>
    </div>
</div>
<div class="list">
    <div class="w" id="app">
        <table>
            <thead>
            <tr>
                <th>图片</th>
                <th>商品名称</th>

                <th>数量</th>
                <th>单价</th>
                <th>金额</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:unless="${session.cart}">
                <td colspan="6">购物车空空如也，请抓紧购物吧!!!!</td>
            </tr>
            </tbody>
            <tbody th:if="${session.cart}">
            <tr th:each="cartItemEntry :${session.cart.cartItemMap}">
                <td>
                    <img th:src="${cartItemEntry.value.imgPath}" alt="">
                </td>
                <td th:text="${cartItemEntry.value.bookName}">活着</td>
                <td>
                    <a class="count" th:href="@{cart(method='countDecrease', id=${cartItemEntry.value.bookId})}"
                       onclick="cartItemCountDecrease()">-</a>
                    <input class="count-num" type="text" th:value="${cartItemEntry.value.count}"
                           @change="updateCartItemCount"/>
                    <input type="hidden" th:value="${cartItemEntry.value.bookId}"/>
                    <a class="count" th:href="@{cart(method='countIncrease', id=${cartItemEntry.value.bookId})}">+</a>
                </td>
                <td th:text="${cartItemEntry.value.price}"></td>
                <td th:text="${cartItemEntry.value.amount}"></td>
                <td><a th:href="@{cart(method='removeCartItem', id=${cartItemEntry.value.bookId})}"
                       @click="deleteCartItem">删除</a></td>
            </tr>
            </tbody>
        </table>
        <div class="footer" th:if="${session.cart}">
            <div class="footer-left">
                <a href="cart?method=cleanCart" class="clear-cart" @click="cleanCart">清空购物车</a>
                <a href="index">继续购物</a>
            </div>
            <div class="footer-right">
                <div>共<span th:text="${session.cart.totalCount}"></span>件商品</div>
                <div class="total-price">总金额<span th:text="${session.cart.totalAmount}"></span>元</div>
                <a class="pay" href="order?method=checkOut">去结账</a>
            </div>
        </div>
    </div>
</div>
<div class="bottom">
    <div th:include="segment/footer :: contact"></div>
    <div th:include="segment/footer :: copyright"></div>
</div>
<script src="static/script/vue.js"></script>
<script>
    function cartItemCountDecrease() {
        //判断:输入框的内容是否是1
        //输入框就是当前点击的a标签的下一个兄弟: event.target.nextElementSibling
        if (event.target.nextElementSibling.value === '1') {
            var bookName = event.target.parentElement.parentElement.getElementsByTagName("td")[1].innerText;
            //则弹出提示框问你是否要删除
            if (!confirm(bookName + "的数量已经是1了，你确定还要减少吗?")) {
                //阻止事件发生
                event.preventDefault()
            }
        }
    }

    const app = new Vue({
        el: "#app",
        methods: {
            cleanCart() {
                // 弹出确认框
                if (!confirm("你确定要清空购物车吗?")) {
                    //不需要清空购物车，阻止a标签跳转
                    event.preventDefault()
                }
            },
            deleteCartItem() {
                // 获取要删除的购物项的书名
                // event.target就表示获取当前事件的标签
                let bookName = event.target.parentElement.parentElement.getElementsByTagName("td")[1].innerText;
                if (!confirm("你确定要删除" + bookName + "吗?")) {
                    //不需要清空购物车，阻止a标签跳转
                    event.preventDefault()
                }
            },
            updateCartItemCount() {
                // 获取 bookId
                let bookId = event.target.nextElementSibling.value
                // 获取 newCount
                let newCount = event.target.value
                // 校验newCount的格式是否正确
                let reg = /^[1-9][0-9]*$/
                if (reg.test(newCount)) {
                    // 发送请求携带请求参数
                    location.href = "cart?method=updateCartItemCount&id=" + bookId + "&newCount=" + newCount

                } else {
                    alert("请输入正确的数量")
                }
            }
        }
    })

</script>
</body>
</html>
